@charset "utf-8";
@import "reset.scss";
@mixin hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    margin-bottom: 30px;

    >p {
        font-size: 36px;
        letter-spacing: 2px;
        color: #8b8a8a;
    }

    >div {
        display: flex;
        justify-content: space-between;
        width: 100px;
        letter-spacing: 1px;
        color: #949393;

        &:hover {
            color: #d10f0f;
        }

        &:hover div {
            background-color: #d10f0f;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 15px;
            height: 15px;
            border-radius: 15px;
            background-color: #949393;
            ;
            color: white;
        }
    }
}

.mainArtcle {
    padding: 100px 0;
    .mainArticleHd {
        @include hd;
    } 
    .mainArticleMain {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        >div {
            width: 392px;
            height: 496px;
            border: 1px solid #a0a0a0;
            margin-bottom: 10px;
            img {
                width: 392px;
                height: 305px;
            }
            >div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width: 392px;
                height: 191px;
                padding-left: 5px;
                >p:nth-of-type(1) {
                    font-size: 18px;
                    letter-spacing: 1px;
                    color: #535353;
                }
                >p:nth-of-type(2) {
                    font-size: 10px;
                    letter-spacing: 1px;
                    color: #535353;
                    padding-right: 5px;
                    span {
                        color: #cf0d0d; 
                    }
                }
                >div {
                    display: flex;
                    justify-content: space-between;
                    >p {
                        font-size: 14px;
                        letter-spacing: 1px;
                        color: #cf0d0d;
                        span {
                            font-size: 14px;
                            color: #bbbbbb;
                        }
                    }
                    .loveBt {
                        &:hover button {
                            color: #f3f3f3;
                            background-color: #cf0d0d;
                        } 
                        &:hover i {
                            color: #f3f3f3;
                        }
                        button {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 80px;
                            height: 24px;
                            line-height: 24px;
                            border: 1px solid #bbbbbb;
                            border-radius: 9px;
                            font-size: 10px;
                            letter-spacing: 1px;
                            color: #bbbbbb;
                            margin-right: 20px;
                            i {
                                color: #cf0d0d;
                            }
                        }
                    }
                }
            }
        }
    }
}